<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>

    <div id="ad"></div>


    <script>
        // 需求1 点击div 2s后颜色变成粉色
        
        // 获取元素
        let ad = document.getElementById('ad')
        //绑定事件
        ad.addEventListener('click', function(){
            // let that = this
            // 定时器
            // setTimeout (function () {
                //修改背景颜色
                // this.style.background = 'pink' //此时this指向window
                // that.style.background = 'pink'
            // }, 2000)

            
            // 在add.addEventListener下面声明,此时this指向ad
            setTimeout(()=>{
                this.style.background = 'pink'
            }, 2000)
        })



        // 需求2 从数组中返回偶数的元素
        const arr = [1,4,5,8,17,12,56,13]
        // const result = arr.filter(function(item){
        //     if(item % 2 === 0) {
        //         return true
        //     } else {
        //         return false
        //     }
        // })

        const result = arr.filter(item => item % 2 === 0)

        console.log(result)

        // 箭头函数 适合与 this无关的回调, 定时器,数组的方法回调
        // 不适合与this有关的回调, 事件回调,对象的方法
        
        // {
        //     name: '尚硅谷',
        //     getName: ()=> {
        //         this.name
        //     }   
        // }
    </script>
</body>
</html>